<template>
	<view class="u-page__item" v-if="tabbar?.list.length > 0">
		<su-tabbar :value="path" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			:inactiveColor="tabbar.inactiveColor" :activeColor="tabbar.activeColor" :midTabBar="tabbar.mode === 2"
			:customStyle="tabbarStyle">
			<su-tabbar-item v-for="(item, index) in tabbar.list" :key="item.text" :text="item.text" :name="item.url"
				:isCenter="getTabbarCenter(index)"
				:centerImage="state.isManage?item.inactiveIcon:sheep.$url.cdn(item.inactiveIcon)"
				@tap="sheep.$router.go(item.url,{},{redirect:state.isManage?true:false})">
				<template v-slot:active-icon>
          <uni-badge :text="cartCount" absolute="rightTop" size="small" v-if="item.text=='购物车'">
            <image class="u-page__item__slot-icon"
                   :src="state.isManage?item.activeIcon:sheep.$url.cdn(item.activeIcon)"></image>
          </uni-badge>
					<image class="u-page__item__slot-icon"
						:src="state.isManage?item.activeIcon:sheep.$url.cdn(item.activeIcon)" v-else></image>
				</template>
				<template v-slot:inactive-icon>
          <uni-badge :text="cartCount" absolute="rightTop" size="small" v-if="item.text=='购物车'">
            <image class="u-page__item__slot-icon"
                   :src="state.isManage?item.inactiveIcon:sheep.$url.cdn(item.inactiveIcon)"></image>
          </uni-badge>
					<image class="u-page__item__slot-icon"
						:src="state.isManage?item.inactiveIcon:sheep.$url.cdn(item.inactiveIcon)" v-else></image>
				</template>
			</su-tabbar-item>
		</su-tabbar>
	</view>
</template>

<script setup>
	import {
		computed,
		unref,
		reactive
	} from 'vue';
	import sheep from '@/sheep';

	const props = defineProps({
		path: String,
		default: '',
	});

	const state = reactive({
		isManage: false,
	})

  const cartCount = computed(() => {
    return sheep.$store('cart').list.length;
  })

	const tabbar = computed(() => {
		const isManage = uni.getStorageSync('isManage')
		state.isManage = isManage
		const manageTabbar = uni.getStorageSync('manageTabbar')
		return isManage ? manageTabbar : sheep.$store('app').template.basic?.tabbar;
	});

	const tabbarStyle = computed(() => {
		const backgroundStyle = tabbar.value.background;
		if (backgroundStyle.type == 'color') return {
			background: backgroundStyle.bgColor
		};
		if (backgroundStyle.type == 'image')
			return {
				background: `url(${sheep.$url.cdn(
          backgroundStyle.bgImage,
        )}) no-repeat top center / 100% auto`,
			};
	});

	const getTabbarCenter = (index) => {
		if (unref(tabbar).mode !== 2) return false;
		return unref(tabbar).list % 2 > 0 ?
			Math.ceil(unref(tabbar).list.length / 2) === index + 1 :
			false;
	};
</script>

<style lang="scss">
  .uni-badge--x{
    height: 25px;
  }
	.u-page {
		padding: 0;

		&__item {
			&__title {
				color: var(--textSize);
				background-color: #fff;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: var(--textSize);
					font-size: 14px;
				}
			}

			&__slot-icon {
				width: 26px;
				height: 26px;
			}
		}
	}
</style>
